<template>
  <div class="trans-get-red-packet-wrap">
    <div class="banner-wrap" ref="banner">
      <img src="@/assets/redpack/banner.png" />
    </div>
    <ul class="nav-bar-wrap" ref="nav">
      <li :class="activeNav == 2 ? 'active' : ''" @click="changeNav(2)">
        今日转发得红包
      </li>
      <li :class="activeNav == 1 ? 'active' : ''" @click="changeNav(1)">
        明日转发得红包
      </li>
    </ul>
    <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh">
      <van-list
        v-model="isLoadingMore"
        :finished="finished"
        loading-text="努力加载中..."
        :immediate-check="false"
        :finished-text="tip"
        :offset="offset"
        @load="onLoad"
      >
        <div class="tab-content-wrap" v-if="list.length > 0">
          <list-item
            v-for="(v, index) in list"
            :key="v.liveid"
            :cur-item="v"
            :index="index"
            :tab-type="activeNav"
          />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ListItem from './components/ListItem.vue';

export default {
  name: 'list',
  components: {
    ListItem
  },
  data() {
    return {
      active: 1,
      userId: '',
      activeNav: 2,

      isRefreshing: false, // 下拉刷新
      isLoadingMore: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 10, // 滚动条与底部距离小于 offset 时触发load事件
      tip: '我是有底线的',
      pageNo: 1,
      pageSize: 20,
      firstLoading: false,

      // 滚动记录
      oldScrollTop: 0, // 记录上一次滚动结束后的滚动距离
      scrollTop: 0, // 记录当前的滚动距离

      throttleFnc: '',
      list: [
        {
          corpid: '1125334210510823426',
          statu: 2,
          yugaoneirong:
            '【周日】12月29日上午7:00开播3款， 可爱秀CURLYSUE商品， 全场13元起，本次活动123天，最晚于5月3日发货，xxxxxxxxxxxs',
          yugaotupian:
            'http://devdevnew.oss.aikucun.com/mermanager-platform-system/993a5fe821f7fd5900af3168ac2b8d0c4c0910fa_1575856373678_28.jpg,http://devdevnew.oss.aikucun.com/mermanager-platform-system/9eb2427cc717975fb094e53cec445732abc6c01e_1575856373703_16.jpg,http://devdevnew.oss.aikucun.com/mermanager-platform-system/7a18e3cc6485bc79ba2dd12480baef08e9be8b4e_1575856373667_6.jpg,http://devdevnew.oss.aikucun.com/mermanager-platform-system/be2efbd832132533b3dfc5602ae6f1a9e109adea_1575856373711_24.jpg,http://devdevnew.oss.aikucun.com/mermanager-platform-system/b7ca4c8da63c292058b90efc952e1f0d20b38ad8_1575856373651_25.jpg,http://devdevnew.oss.aikucun.com/mermanager-platform-system/03958a71ecce4e78d6f348d43d2dd04a2bf1ac69_1575856373667_4.jpg',
          postagefree: 0,
          content:
            '最晚于5月3日，xxxx发货。【云南不发货】【不支持七天无理由退换货】',
          forwardenable: 1,
          buymodel: 0,
          isvirtual: 0,
          memberLevels: '0',
          top: 0,
          crossBorderProduct: 0,
          isnewcomer: 1,
          isfirst: 0,
          liveid: '1203855563382894594',
          pinpaiid: '1004900834981953538',
          pinpai: '1004900834981953538',
          pinpaiurl:
            'http://devdevnew.oss.aikucun.com/mer/16c8f8ac7b57bd5b58b41327228e3fa21201db68_1572589668529_90.jpg',
          pinpaiming: 'shunping123',
          rewards: [],
          isNormSize: 1,
          fodderLabel: 0,
          postageflag: 1,
          begin: '2019-12-09 10:15:00',
          begintimestamp: '1575857700',
          end: '2020-04-30 03:00:00',
          endtimestamp: '1588186800',
          name: '轻履约1209勿改',
          miaoshu: '轻履约1209勿改',
          aftersaletime: '2020-05-21 03:00:00',
          liveno: '19120900005',
          needpush: 1,
          aftersaletimeshuzi: '1590001200',
          livenonum: 14,
          currentstatu: 1,
          cartovertime: 30,
          aftersaleday: 21,
          barcodeconfig: '0',
          forwardviplevel: 3,
          delivertime: '2020-05-04 03:00:00',
          productnum: 3,
          huodongmoshi: '0',
          activitySpecial: 0,
          area: 0,
          vipExclusiveBackstage: 0,
          statementByDay: '1',
          hideShipmentsAddress: '1',
          publicityAccessory: '',
          accessoryCover: '',
          limitBuyNum: 0,
          activityArea: '1',
          salemodel: '1',
          exclusiveActivity: 0,
          onlineProductCount: 3,
          categoryId: 'ff8080816797e46901679d390c1a0052',
          isJoinRebate: 0,
          channelCode: 'app,dadacang,photo',
          deliverType: 1,
          isReturnMerchant: 1,
          isPinpaiRecommend: false,
          presaleModel: 0,
          maxEarnMoney: 300,
          productList: [
            {
              id: '191209000051154015193278713863',
              pic:
                'http://devdevnew.oss.aikucun.com/merchant-platform/merchant-platform/72f39cbfe05dbbfa454706ebc23e751682c865f4_1568880799045_35.jpg',
              stock: -1,
              earnMoney: 300
            },
            {
              id: '191209000051154015193278713861',
              pic:
                'http://devdevnew.oss.aikucun.com/be6e77d5baeca19a2045f7f9a78a92655cfa8685_1565685742506_46.png',
              stock: -1,
              earnMoney: 100
            },
            {
              id: '191209000051154015193253548034',
              pic:
                'http://devdevnew.oss.aikucun.com/mermanager-platform-system/null_1578376888795_64.jpg',
              stock: -1,
              earnMoney: 100
            }
          ],
          apieceIssuing: '0',
          charge_rule: '0',
          aPieceIssuing: '0'
        }
      ]
    };
  },
  methods: {
    changeNav(tabIndex) {
      // const tabName = tabIndex === 2 ? '今日转发得红包' : '明日转发得红包';
      this.activeNav = tabIndex;
      this.pageNo = 1;
      this.firstLoading = true;
    },
    onRefresh() {
      // todo
    },
    onLoad() {
      // todo
    }
  }
};
</script>

<style lang="scss" scoped>
.trans-get-red-packet-wrap {
  background: #f8f8f8;
  min-height: 100vh;

  .banner-wrap {
    height: 2.6rem;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .nav-bar-wrap {
    height: 0.72rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    li {
      flex: 1;
      font-size: 0.28rem;
      height: 100%;
      font-weight: 400;
      text-align: center;
      color: #666666;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      &.active {
        color: #ff3037;
        &:after {
          content: '';
          display: block;
          width: 0.32rem;
          height: 0.06rem;
          border-radius: 0.04rem;
          background: #ff3037;
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -0.16rem;
        }
      }
    }
  }

  .tab-content-wrap {
    padding: 0.16rem 0 0 0.08rem;
  }
}
</style>
